<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(一)——基本筛选器</title>
    <style type="text/css">
        table,td{
            border: 1px solid;
            border-collapse: collapse;/*细边框*/
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery筛选li元素示例</legend>
        <ul>
            <li>我是第一个li</li>
            <li>我是第二个li</li>
            <li>我是第三个li</li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>jQuery筛选奇数或者偶数的元素</legend>
        <table>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
            <tr>
                <td>第三行第一列</td>
                <td>第三行第二列</td>
                <td>第三行第三列</td>
            </tr>
            <tr>
                <td>第四行第一列</td>
                <td>第四行第二列</td>
                <td>第四行第三列</td>
            </tr>
        </table>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        /******************************************jQuery筛选li元素代码*****************************************************/
        var first_li = $("li:first");//获取第一个li元素
        var last_li = $('li:last');//获取最后一个li元素;
        //想验证是不是获取到目标li元素，通过打印出li元素的文本就可以知道了
        console.log(first_li.text());//打印li元素的文本内容，使用jQuery提供的text方法获取元素的文本
        console.log(last_li.text());//打印li元素的文本内容，使用jQuery提供的text方法获取元素的文本
       
        /******************************************jQuery筛选li元素代码*****************************************************/

        /******************************************jQuery筛选奇数或者偶数的元素*********************************************/
        console.log("获取表格中索引为偶数的行");
        var trArr1 = $("tr:even");//获取表格中索引为偶数的行，从0开始
        console.log(trArr1);//打印获取结果
        console.log("获取表格中索引为奇数的行");
        var trArr2=$("tr:odd");//获取表格中索引为奇数的行，从0开始
        console.log(trArr2);//打印获取结果
        /******************************************jQuery筛选奇数或者偶数的元素*********************************************/

        /******************************************jQuery根据索引值获取元素*********************************************/
        console.log("根据指定的索引值获取行");
        var tr1 = $("tr:eq(1)");//获取表格中索引为1的那一行，从0开始
        console.log(tr1);//打印获取结果
        console.log("获取大于给定索引值的行");
        var trArr3=$("tr:gt(0)");//获取表格中索引大于0的那些行，从0开始
        console.log(trArr3);//打印获取结果
        console.log("获取小于给定索引值的行");
        var trArr4=$("tr:lt(2)");//获取表格中索引小于2的那些行，从0开始
        console.log(trArr4);//打印获取结果
        /******************************************jQuery根据索引值获取元素*********************************************/

    });
</script>
</html>